<html>
<head>
<link type="text/css" rel="styleSheet" href="css/default.css" />
<link type="text/css" rel="styleSheet" href="css/css.css" />
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue-cookies.js"></script>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
	<div id="app">
		<div class="article" style="">
			<div style="height: 30px;">
				<h3>{{article.title}}</h3>
			</div>
			<div style="height: 30px;">
				<img src="pic/a.jpg" style="width: 26px;" />{{article.authorname}}
			</div>
			<div id="content" style="overflow: hidden;">{{article.content}}</div>
			<a>阅读全文</a>
			<div style="margin-top: 12px;">
				<button id="like" btncolor="blue" btnsize="s" onclick="addlike()">赞同{{article.like}}</button>
				<button id="nolike" btncolor="blue" btnsize="s" onclick="addnolike()">反对{{article.nolike}}</button>
				<button id="time" btncolor="blue" btnsize="s" onclick="addfavorite()">收藏</button>
				<button id="time" btncolor="blue" btnsize="s">分享</button>
				<button id="time" btncolor="blue" btnsize="s">举报</button>
				<span id="time" style="float: right">{{article.time}}</span>
			</div>
		</div>
		<div>
			添加评论
			<textarea style="width: 100%;" v-model="inputcomment"></textarea>
			<button v-on:click="addcomment">提交</button>
		</div>
		<div v-for="comment in comments" class="comment">
			<div style="height: 30px;">
				<img src="pic/a.jpg" style="width: 26px;" />{{comment.authorname}}
			</div>
			<div id="content" style="overflow: hidden;">{{comment.content}}</div>
			<div style="margin-top: 12px; color: grey">
				<span class="bottom-tag" v-on:click="commentlike(comment.id)" >赞同{{comment.like}}</span>
				<span class="bottom-tag" v-on:click="commentnolike(comment.id)" >反对{{comment.nolike}}</span>
				<span class="bottom-tag">回复</span> 
				<span class="bottom-tag">举报</span>
				<span>{{comment.time}}</span>
			</div>
		</div>
	</div>
</body>
<script>
var userid = window.$cookies.get("userid");
var aid = location.href.split("?")[1];
	loadComment();
	loadArticle();
	var vm = new Vue({
		el : "#app",
		data : {
			article : "123",
			comments : "123",
			inputcomment : ""
		},
		methods : {
			addcomment : function() {
				if(userid==null){alert("请先登录")}else{
				var that = this;
				axios({
					url : 'http://localhost/addcomment',
					method : 'post',
					data : {
						"article" : aid,
						"author" : userid,
						"content" : that.inputcomment
					}
				}).then(function(resp) {
					if (resp) {
						alert("评论成功");
						that.inputcomment="";
						loadComment();
					}
				});
			}},
			////////////////////////////
			commentlike:function(cid){
				axios({
					url : '/comment/addlike/'+cid,
					method : 'get',
				}).then(function(resp) {
					if (resp) {
						loadComment();
					}
				});
			},
			////////////////////////////
			commentnolike:function(cid){
				axios({
					url : '/comment/addnolike/'+cid,
					method : 'get',
				}).then(function(resp) {
					if (resp) {
						loadComment();
					}
				});
			}
		}
	});
function addlike(){
	$.ajax({
		url : "http://localhost/addlike/" + aid,
		type : "get",
		success : function(response) {
			if(response){loadArticle();};
		}
	});
}
function addnolike(){
	$.ajax({
		url : "http://localhost/addnolike/" + aid,
		type : "get",
		success : function(response) {
			if(response){loadArticle();};
		}
	});
}
function loadArticle(){
	$.ajax({
		url : "http://localhost/getone/" + aid,
		type : "get",
		success : function(response) {
			vm.article = response;
		}
	});
}
function loadComment(){
	$.ajax({
		url : "http://localhost/getcomments/" + aid,
		type : "get",
		success : function(response) {
			vm.comments = response;
		}
	});
}
function addfavorite(){
	$.ajax({
		url : "http://localhost/addfavorite/"+userid+"/" + aid,
		type : "get",
		success : function(response) {
			if(response){
			alert("收藏成功");}
		}
	});
}
</script>
</html>